<template>
	<view style="background-color: #fff;">
		<view class="_flex listPart" v-for="item in list" @click="goDetail(item)">
			<view class="iconStyle" :style="{'background-color':item.color}">
				<u-icon color="#fff" :name="item.icon" size="40rpx"></u-icon>
			</view>
			<view style="width: 85%;">
				<view class="_flex _justify_between" style="margin-bottom: 8rpx;">
					<view style="font-size: 32rpx;">
						{{item.title}}
					</view>
					<view style="color: #999;" v-if="item.content!==''">
						{{item.date}}
					</view>
				</view>
				<view class="contentStyle">
					<text v-if="item.content!==''">{{item.content}}</text>
					 <text v-else>暂无新消息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						icon:'chat-fill',
						color:'#6193F9',
						title:'聊天消息',
						content:''
					},
					{
						icon:'bell-fill',
						color:'#49BEF5',
						title:'系统消息',
						content:'不查不知道，一查吓一跳，只需一招，轻松搞定',
						date:'2021-06-29'
					},
					{
						icon:'more-circle-fill',
						color:'#2684F7',
						title:'互动消息',
						content:''
					},
					{
						icon:'car-fill',
						color:'#68D69D',
						title:'车源推荐',
						content:''
					},
					{
						icon:'rmb-circle-fill',
						color:'#FA9100',
						title:'调价消息',
						content:''
					},
					{
						icon:'bag-fill',
						color:'#F25733',
						title:'业务消息',
						stat:true,
						content:'您查询的蔚来ES6维修保养记录报告已生成',
						date:'2021-05-11'
					},
					{
						icon:'server-man',
						color:'#CBAD7A',
						title:'爱买车小秘书',
						content:''
					}
				]
			}
		},
		methods: {
			goDetail(item){
				if(!item.stat){
					if(item.content===''){
						uni.navigateTo({
							url:'./carSourceRecommendation?title='+ item.title,
							
						})
					}else{
						uni.navigateTo({
							url:'./messageDetail?title='+ item.title,
						})
					}
				}
				
			}
		}
	}
</script>

<style scoped>
	.iconStyle{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 87rpx;
		margin-right: 16rpx;
	}
	.listPart{
		padding: 26rpx 24rpx;
		border-bottom: 1px solid #eee;
	}
	.contentStyle{
		width: 85%;
		color: #676666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
